<template>
    <f-tabs>
        <f-tab-page id="tab1" title="Tab Page 1">Content of Tab Page 1</f-tab-page>
        <f-tab-page id="tab2" title="Tab Page 2">Content of Tab Page 2</f-tab-page>
        <f-tab-page id="tab3" title="Tab Page 3">Content of Tab Page 3</f-tab-page>
        <f-tab-page id="tab4" title="Tab Page 4">Content of Tab Page 4</f-tab-page>
        <f-tab-page id="tab5" title="Tab Page 5">Content of Tab Page 5</f-tab-page>
        <f-tab-page id="tab6" title="Tab Page 6">Content of Tab Page 6</f-tab-page>
        <f-tab-page id="tab7" title="Tab Page 7">Content of Tab Page 7</f-tab-page>
        <f-tab-page id="tab8" title="Tab Page 8">Content of Tab Page 8</f-tab-page>
        <f-tab-page id="tab9" title="Tab Page 9">Content of Tab Page 9</f-tab-page>
    </f-tabs>
    <f-tabs tab-type="pills">
        <f-tab-page id="tab1" title="Tab Page 1">Content of Tab Page 1</f-tab-page>
        <f-tab-page id="tab2" title="Tab Page 2">Content of Tab Page 2</f-tab-page>
        <f-tab-page id="tab3" title="Tab Page 3">Content of Tab Page 3</f-tab-page>
        <f-tab-page id="tab4" title="Tab Page 4">Content of Tab Page 4</f-tab-page>
        <f-tab-page id="tab5" title="Tab Page 5">Content of Tab Page 5</f-tab-page>
        <f-tab-page id="tab6" title="Tab Page 6">Content of Tab Page 6</f-tab-page>
        <f-tab-page id="tab7" title="Tab Page 7">Content of Tab Page 7</f-tab-page>
        <f-tab-page id="tab8" title="Tab Page 8">Content of Tab Page 8</f-tab-page>
        <f-tab-page id="tab9" title="Tab Page 9">Content of Tab Page 9</f-tab-page>
    </f-tabs>
    <f-tabs tab-type="pills" justify-content="center">
        <f-tab-page id="tab1" title="Tab Page 1">Content of Tab Page 1</f-tab-page>
        <f-tab-page id="tab2" title="Tab Page 2">Content of Tab Page 2</f-tab-page>
        <f-tab-page id="tab3" title="Tab Page 3">Content of Tab Page 3</f-tab-page>
    </f-tabs>
    <f-tabs tab-type="pills" justify-content="center">
        <template #headerPrefix>
            <div class="modal-title">
                <span class="modal-title-label">列配置</span>
            </div>
        </template>
        <f-tab-page id="tab1" title="显示列">Content of Tab Page 1</f-tab-page>
        <f-tab-page id="tab2" title="排序列">Content of Tab Page 2</f-tab-page>
        <f-tab-page id="tab3" title="更多配置">Content of Tab Page 3</f-tab-page>
        <template #headerSuffix>
            <div class="f-btn-icon f-bare">
                <span class="f-icon modal_close"></span>
            </div>
        </template>
    </f-tabs>
    <div style="display: flex; flex-direction: column; height: 500px">
        <f-tabs tab-type="one-page">
            <f-tab-page id="tab1" title="Tab Page 1">Content of Tab Page 1</f-tab-page>
            <f-tab-page id="tab2" title="Tab Page 2">Content of Tab Page 2</f-tab-page>
            <f-tab-page id="tab3" title="Tab Page 3">Content of Tab Page 3</f-tab-page>
            <f-tab-page id="tab4" title="Tab Page 4">Content of Tab Page 4</f-tab-page>
            <f-tab-page id="tab5" title="Tab Page 5">Content of Tab Page 5</f-tab-page>
            <f-tab-page id="tab6" title="Tab Page 6">Content of Tab Page 6</f-tab-page>
            <f-tab-page id="tab7" title="Tab Page 7">Content of Tab Page 7</f-tab-page>
            <f-tab-page id="tab8" title="Tab Page 8">Content of Tab Page 8</f-tab-page>
            <f-tab-page id="tab9" title="Tab Page 9">Content of Tab Page 9</f-tab-page>
        </f-tabs>
    </div>
</template>
